import React, { memo } from 'react'
import { useLocation,useNavigate} from 'react-router-dom'
import { NavBar } from 'react-vant';
import { AutoCenter } from 'antd-mobile'
import style from './Index.module.css'
const Index:React.FC = memo( () => {
    const { state: { item } } = useLocation()
    const joop = useNavigate()
    const Toast = () => {
        joop('/home')
    }

    return (
        <div className={style.box}>
            <NavBar
                title="标题"
                leftText="返回"
                rightText="按钮"
                onClickLeft={() => Toast()}
            />

            <div className={style.textone}>
                <h1>{item.title}</h1>
                <AutoCenter>{item.detail.textOne}</AutoCenter>
                <img style={{ width: '100%', height: '200px' }} src={item.detail.imgOne} alt="" />

                <p>{item.detail.textTwo}</p>
            </div>
            <h3 style={{ textAlign: 'center', marginTop: '20px' }}>{item.detail.title}</h3>
            <hr style={{ width: '180px', margin: '0 auto', border: '7px solid green' }} />
            <div style={{ width: '100%', height: '120px', marginTop: '20px', borderLeft: '3px solid #b3b3b3' }} className={style.texttwo}>

                <AutoCenter>{item.detail.textThree.p} <b style={{ fontSize: '13px', color: '#b3b3b3' }}>{item.detail.textThree.b}</b>
                    <br />
                    <br />
                    <b style={{ fontSize: '13px', color: '#b3b3b3' }}>{item.detail.textFour?.p}</b>{item.detail.textFour?.b}
                </AutoCenter>
                <h2><img src="../../img/image.png" alt="" /> {item.detail.textFive} </h2>
                <AutoCenter>
                    <p style={{ fontSize: '14px' }}>{item.detail.textSix?.p} <span style={{ color: 'red' }}>{item.detail.textSix?.h}</span>{item.detail.textSix?.h1} <b style={{ fontSize: '13px', color: '#96ce8b' }}>{item.detail.textSix?.b}</b></p>
                    <br />
                    <img style={{ width: '100%', height: '200px' }} src={item.detail.imgTwo} alt="" />
                </AutoCenter>
                <div>
                    {item.detail.ul?.title}:
                    <br />
                    <ul style={{ textAlign: 'left' }}>
                        <li>{item.detail.ul?.li[0]}</li>
                        <li>{item.detail.ul?.li[1]}</li>
                        <li>{item.detail.ul?.li[2]}</li>
                        <li>{item.detail.ul?.li[3]}</li>
                        <li>{item.detail.ul?.li[4]}</li>
                        <li>{item.detail.ul?.li[5]}</li>
                        <li>{item.detail.ul?.li[6]}</li>
                        <li>{item.detail.ul?.li[7]}</li>
                        <li>{item.detail.ul?.li[8]}</li>
                        <li>{item.detail.ul?.li[9]}</li>
                    </ul>
                </div>
                <img src="../../img/textToU.png" alt="" />
                <div style={{ marginTop: '20px', background: 'rgb(248,247,237)', width: '100%', height: '80px', borderLeft: '3px solid #b3b3b3' }} className="daoer">
                    <div className={style.nr}>
                        <p style={{ fontSize: '15px' }}>{item.detail.gaoshipai}</p>
                    </div>
                </div>

                <div style={{ marginTop: '20px' }} className={style.texteg}>
                    <p>{item.detail.textSeven}</p>
                    <img style={{ width: '100%', height: '200px', marginTop: '20px' }} src={item.detail.imgThree} alt="" />
                </div>
                <h3><img src="../../img/image.png" alt="" />{item.detail.textNine}</h3>
                <div style={{ marginTop: '20px' }}>
                    <p>{item.detail.textTen}</p>
                </div>
                <div style={{ marginTop: '20px' }}>
                    <p>{item.detail.textTen}</p>
                </div>
            </div>

        </div>
    )
})

export default Index
